<script setup>
import {onMounted, reactive} from "vue";
import router from "@/router/index";
import {ElMessage} from "element-plus";
import {getallpost, changpostisreview, getAdminPostByName} from "@/http/api";



const info =reactive({
  posttable:[{
    name:'',
    uid:'',
    postid:'',
    isDeleted:'',
    isReview:'',
    creatTime:''
  }
  ],
  pageSize: 5,
  pageNum:1,
  total:0,
  name:'',
  tag:'',
  status:'',
  isReview:'',
})


const name_table =JSON.parse(window.localStorage.getItem("userInfo"));

const flag =true

// 显示表单数据
onMounted(()=>{
  getall()
})

function getall() {
  getallpost({pageSize:info.pageSize,pageNum:info.pageNum,isReview:0}).then((res)=>{
    console.log(res.data)
    info.posttable =res.data.list
    info.total=res.data.total
  })
}

//修改每页最大数
function handleSizeChange(newSize){
  info.pageSize = newSize;
  getall()
}
//跳转到第几页
function handleCurrentChange(newPage){
  info.pageNum = newPage;
  getall()
}

function getbyname(){
  getAdminPostByName({name:info.name,pageIndex:info.pageNum,pageSize:info.pageSize,isReview:0}).then((res)=>{
    if (res.code===10000){
      info.tableData =res.data.list
      info.total=res.data.total
    }else {
      ElMessage.error(res.msg)
    }

  })
}

//名字查询
function queryname(){
  getbyname()
}

function pass(row) {
  changpostisreview({postid:row.postid,isReview:1}).then((res)=>{
    if (res.code===10000){
      ElMessage.success("审核成功")
      getall()
    }
    else{
      ElMessage.error("审核失败")
    }
  })
}

function nopass(row){
  changpostisreview({postid:row.postid,isReview:-1}).then((res)=>{
    if (res.code===10000){
      ElMessage.success("审核成功")
      getall()
    }
    else{
      ElMessage.error("审核失败")
    }
  })
}

function topost(postid){
  router.push("/postdetail/"+postid)
}


</script>

<template>
  <div class="employee-main">



    <!--  搜索框-->
    <el-input
        placeholder="请输入发帖人名称"
        class="username-input"
        v-model="info.tag"
        prefix-icon="Search">
    </el-input>
    <!--  搜索按钮-->
    <el-button class="uaername-button" @click="queryname"><el-icon><Search/></el-icon>查询</el-button>
    <!--用户列表-->
    <div class="table">
      <el-table :data="info.posttable" style="width: 100%">
        <el-table-column prop="postid" label="帖子id" width="150" />
        <el-table-column prop="name" label="发帖人" width="200" />
        <el-table-column prop="uid" label="发帖人id" width="200"/>
        <el-table-column prop="createTime" label="发帖时间" width="200"/>
        <el-table-column prop="isReview" label="审核状态" width="100">
          <template #default="scope">
            {{scope.row.isReview === 0 ? '未审核' : '已审核'}}
          </template>
        </el-table-column>
        <el-table-column  prop="isDeleted" label="帖子状态" width="100" >
          <template #default="scope">
            {{scope.row.isDeleted === 0 ? '正常' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template #default="scope">
            <div style="display: flex; align-items: center;">
              <el-button size="small" @click="pass(scope.row)" text type="success" style="width: 70px;">
                通过
              </el-button>
              <el-button size="small" @click="nopass(scope.row)" text type="danger" style="width: 70px;">
                不通过
              </el-button>
              <el-button text size="small" @click="topost(scope.row.postid)" type="primary" style="width: 70px;">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>


      <!--    分页   size-change 每页最大变化  current-change当前最大变化   layout 功能组件   -->

      <el-pagination

          :page-sizes="[1, 5, 10, 15]"
          :page-size="info.pageSize"
          layout="total, sizes, prev, pager, next, jumper,slot"
          :total="info.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 10px"

      />
    </div>


  </div>
</template>

<style scoped>

.employee-main{
  padding-top: 20px;
}
.breadcrumb{
  margin-left: 30px;
}

.username-input {
  width: 260px;
  height: 40px;
  margin: 30px;
}
.username-input :deep(.el-input__wrapper.is-focus){
  box-shadow: 0 0 0 0.5px #ffc200;
}

.uaername-button{
  height: 40px;
  margin-bottom: 5px;
  background-color: #ffc200;
}

.uaername-button:hover{
  background-color: rgba(255, 180, 0, 0.99);
  color: #333333;
}

.uaername-button:focus{
  background-color: #ffc200;
  color: #333333;
  border-color: #ffc200;
}
.add-button{
  height: 40px;
  margin-bottom: 5px;
  background-color: #ffc200;
}

.add-button:hover{
  background-color: rgba(255, 180, 0, 0.99);
  color: #333333;
}

.add-button:focus{
  background-color: #ffc200;
  color: #333333;
  border-color: #ffc200;
}

.table{
  margin: 25px;
}

</style>